var config = {
    content: [{

        type: "column",
        content: [
            {
                type: 'row',
                height: 70,
                content: [{
                    type: 'component',
                    componentName: 'HierarchyPanel'
                }, {
                    type: 'component',
                    componentName: 'GamePanel'
                },
                {
                    type: 'component',
                    componentName: 'InspectorPanel'
                }]
            }, {
                type: "row",
                height: 30,
                content: [
                    {
                        type: 'component',
                        componentName: 'ResourcePanel'
                    }]
            }]
    }]
};

// <div style="display:flex">
//       <div id ="hierarchyPanel"></div>
//       <canvas id="game" width="400" height="400"></canvas>
//       <div id ="inspectorPanel"></div>></div>
//     </div>

var myLayout = new GoldenLayout(config);
myLayout.registerComponent('HierarchyPanel', function (container, componentState) {
    container.getElement().html('<div id ="hierarchyPanel"></div>');
});
myLayout.registerComponent('GamePanel', function (container, componentState) {
    container.getElement().html('<div id = "gamePanel"></div>');
});
myLayout.registerComponent('InspectorPanel', function (container, componentState) {
    container.getElement().html('<div id ="inspectorPanel"></div>></div>');
});
myLayout.registerComponent('ResourcePanel', function (container, componentState) {
    container.getElement().html('<div id ="resourcePanel"></div>></div>');
});
myLayout.init();

setTimeout(async () => {
    function loadText(url: string) {
        return new Promise<string>((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.onload = () => {
                resolve(xhr.responseText);
            }
            xhr.open("get", url);
            xhr.send();
        })
    }
    const gamePanel = document.getElementById("gamePanel");
    const button = document.createElement("button");
    button.innerText = "运行";
    gamePanel.appendChild(button);
    button.onclick = () => {
        const BrowserWindow = require("electron").remote.BrowserWindow;
        const win = new BrowserWindow({
            width: 800,
            height: 400

        })
        win.on("close", () => {

        })
        win.loadFile("index.html");
        win.webContents.openDevTools();
    }
    const canvas = document.createElement("canvas");
    canvas.id = "game";
    canvas.width = 960;
    canvas.height = 540;
    gamePanel.appendChild(canvas);

    const content = await loadText("config.json");
    window["configData"] = JSON.parse(content);
    const javascriptFiles = window["configData"].scripts;

    for (let item of javascriptFiles) {
        await loadScript(item);
    }
    const editorJavaScriptFiles = [
    "out/engine/editor api.js",
    "out/engine/editor ui.js"
    ]
    for (let item of editorJavaScriptFiles) {
        await loadScript(item);
    }
}, 1000)

function loadScript(url: string) {
    return new Promise((resolve, reject) => {
        const script = document.createElement("script");
        script.onload = () => resolve();
        script.src = url;
        document.body.appendChild(script);
    })
}

